<template>
	<section>
		<!-- <div :class="type == '-3' ? 'lottery' : 'hlep'"> -->
		<div class="lottery">
			<div class="list ml30rem mr30rem" v-infinite-scroll="loadData" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="flag">
				<div class="type">
					<ul v-show="activity == 1">
						<li class="layout-juscon pt30rem pb30rem" v-for="item in data" @click="jumpDetail(item)">
							<img class="list-left" :src="img_url + item.pic_cover_mid+'?x-oss-process=image/resize,m_pad,w_360,h_360'" alt="">
							
							<div class="list-mid flex_1 layout-juscon flex-column ml30rem">
								<p class="ellipsis-more fs30rem">{{ item.goods_name }}</p>
								<div class="list-mid-pirce fs34rem flex mt20rem">
									<strong>￥{{ item.price }}</strong><del class="fs24rem flex-center ml30">原价{{ item.market_price }}元</del>
								</div>
								<div class="list-mid-bottom layout-juscon">
									<p class="flex-center fs24rem">总共{{ item.help_people }}份</p>
									<button class="flex-center fs24rem white pl10rem pr10rem">
										免费抽奖 
									</button>
									<!-- :to="'/detail/free-detail?' + 'type=' + type + '&goodsId=' + item.goods_id"  -->
								</div>
							</div>
						</li>
					</ul>
					<ul v-show="activity == 2 ">
						<li class="layout-juscon pt30rem pb30rem" v-for="item in friendData" @click="jumpDetail(item)">
							<img class="list-left" :src="img_url + item.pic+'?x-oss-process=image/resize,m_pad,w_360,h_360'" alt="">
							<div class="list-mid flex_1 layout-juscon flex-column ml30rem">
								<p class="ellipsis-more fs30rem">{{ item.goods_name }}</p>
								<div class="list-mid-pirce fs34rem flex mt20rem">
									<strong style="width:5rem;">￥{{ item.price }}</strong><del class="fs24rem flex-center ml30">原价{{ item.market_price }}元</del>
								</div>
								<div class="list-mid-bottom layout-juscon">
									<p class="flex-center fs24rem">总量{{ item.help_people }}份</p>
									<button class="flex-center fs24rem white pl10rem pr10rem"  v-if="item.status == 1">
									进行中
									</button>
									<button class="flex-center fs24rem white pl10rem pr10rem" @click.stop="lookDetail(item.goods_id)" v-if="item.status == 2">
										查看详情
									</button>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="placeholder"></div>
			<div class="my-lotterty-box flexcenter" v-show="detailBox">
				<div class="my-lotterty">
					<i class="iconfont icon-guanbi" @click="lookDetailClose()"></i>
					<div class="status-img">
						<img src="../../../assets/lose.png" v-if="activityDetatil.status == 2" alt="">
						<img src="../../../assets/success.png" v-if="activityDetatil.status == 1" alt="">
					</div>
					<h2 class="fs30rem pb30rem pt30rem">好友详情</h2>
					<ul>
						<li class="layout-juscon ml25rem mr35rem pt25rem pb25rem" v-for="item in activityDetatil.list">
							<img class="list-left" :src=" img_url + item.user_headimg" alt="">
							<div class="list-mid flex_1 layout-juscon flex-column ml30rem">
								<p class="ellipsis fs32rem">{{ item.nick_name }}</p>
								<div class="list-mid-bottom layout-juscon">
									<p class="flex-center fs24rem">{{ item.created_at * 1000,"yyyy.MM.dd hh:mm"|formatDate }}</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="footer layout">
				<button class="flexcenter w50 fs30rem" :class="activity == 1 ? 'on' : ''" @click="showActivity(1)">
					<p>
						<i class="iconfont icon-iconfonthome fs45rem"></i><span>更多抽奖</span>
					</p>
				</button>
				<button class="flexcenter flex_1 fs30rem" :class="activity == 2 ? 'on' : ''" @click="showActivity(2)">
					<p>
						<i class="iconfont icon-wode fs45rem"></i>
						<span>我的抽奖</span>
					</p>
				</button>
			</div>
		</div>
	</section>
</template>

<script>
	import { getActivityList, getMyHelp, getActivityDetatil } from '@/api/goods-detail';

	import { formatDate } from '@/utils';
	import { InfiniteScroll,MessageBox } from 'mint-ui';
	// import { Lazyload } from 'mint-ui';
	// import Vue from "vue";
	// Vue.use(Lazyload);
	export default{
		directives:{
			InfiniteScroll,
			MessageBox
		},
		data()
		{
			return{
				data            : [],
				friendData      : [],
				activityDetatil : [],
				activity_cate   : 2,
				activity        : 1,
				page_index      : 1,
				page_size       : 10,
				flag            : true,
				loading         : false,
				detailBox       : false,
				img_url         : process.env.IMG_URL,
				type            : this.$route.query.type,
				uid             : window.localStorage.getItem('uid'),
			}
		},
		created()
		{
			this.loadData();
		},
		filters:
 		{
			formatDate(time, fmt)
			{
				let date = new Date(time);
				return formatDate(date,fmt)
			}
		},
		methods:
		{
			loadData()
			{
				this.$store.dispatch("classId", this.type);
				this.loading = true;
				let params = {
					uid        : this.uid,
					type       : this.type,
					page_index : this.page_index++,
					page_size  : this.page_size
				}
				getActivityList(params).then( res => {
					if(res.data.length > 0 )
					{
						this.data = this.data.concat(res.data);
						this.loading = false;
					}
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				})
			},
			jumpDetail(item)
			{
				this.$router.push('/detail/free-detail?' + 'type=' + this.type + '&goodsId=' + item.goods_id)
			},
			// address(goodsId)
			// {                                              
			// 	MessageBox('收货地址', '请选择一个收货地址').then(action =>
			// 		{
			// 			this.$router.push({ path:"../../member/address?" + 'type=' + this.type + '&goodsId=' + goodsId})
			// 		});
				
			// },
			initData()
			{
				this.data = [];
				this.page_index = 1;
				this.flag = true;
			},
			showActivity(Num)
			{
				this.initData();
				this.activity = Num;
				if(Num == 1){
					this.loadData();
					return;
				}else{
					let params = {
						activity_cate : this.activity_cate,
						uid           : this.uid,
						page_index    : this.page_index++,
						page_size     : this.page_size
					};
					getMyHelp(params).then( res => {
						this.friendData = res.data;
					});
				}
			
			},
			lookDetail(id)
			{
				this.detailBox = true;
				let params = {
						activity_cate : this.activity_cate,
						uid           : this.uid,
						goods_id      : id,
					};
				getActivityDetatil(params).then( res => {
					this.activityDetatil = res.data;
				})
			},
			lookDetailClose()
			{
				this.detailBox = false;
			}
		}
	}
</script>

<style lang="less">
	.lottery
	{
		ul
		{
			li
			{
				border-bottom: 1px solid #e5e5e5;
				color: #535353;
				background: #fff;
				img
				{
					width: 210/28rem;
					height: 225/28rem;
					object-fit: cover;
					border-radius: 4px;
					display: block;
				}
				.list-mid
				{
					p
					{
						color: #333;
					}
					.list-mid-pirce
					{
						strong
						{
							color: #ff0036;
						}
					}
					.list-mid-bottom
					{
						button
						{
							background: #ff0036;
							min-width: 180/28rem;
							height: 60/28rem;
							text-align: center;
							line-height: 60/28rem;
							border-radius: 8px;
						}
					}
				}

			}
		}
		.footer
		{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			background: #fff;
			height: 125/28rem;
			border-top: 1px solid #e5e5e5;
			.on
			{
				color:#ff0036;
				border-right: 1px solid #e5e5e5;
			}
				button{
					height: 100%;
					i
					{
						vertical-align: middle;
						margin-right: 20/28rem;
					}
				}
		}
		.my-lotterty-box
		{
			z-index: 99;
			position: fixed;
			top: 50%;
			left: 50%;
			transform:translate(-50%,-50%);
			background: rgba(0,0,0,.5);
			width: 100%;
			height: 100%;
			.my-lotterty
			{
				background: #fff;
				width: 80%;
				border-radius: 8px;
				position: relative;
				.status-img
				{
					width: 132/28rem;
					height: 128/28rem;
					position: absolute;
					top: 30/28rem;
					right: 30/28rem;
					z-index: 9;
					img
					{
						width: 100%;
						height: 100%;
						display: block;
						object-fit: cover;
					}
				}
				ul
				{
					overflow-y: scroll;
					height: 500/28rem;
					img
					{
						width: 80/28rem;
						height: 80/28rem;
						border-radius: 50%;
						object-fit: cover;
					}
				}
				i
				{
					position: absolute;
					top: -20/28rem;
					right: -20/28rem;
					background: #e5e5e5;
					font-size: 30/28rem;
					width: 54/28rem;
					height: 54/28rem;
					text-align: center;
					line-height: 54/28rem;
					border-radius: 50%;
					color: #666;
				}
				h2
				{
					border-bottom: 1px solid #e5e5e5;
					text-align: center;
				}
				
			}
		}
		.placeholder
		{
			height: 130/28rem;
			display: block;
			width: 100%;
		}
	}
</style>